//生成导航菜单
var navView = Vue.extend({
    name: 'nav-view',
    props:{items:{}},
    template:[
        '<ul class="nav">',
        '    <li class="nav-heading ">',
        '        <span data-localize="sidebar.heading.HEADER">导航菜单</span>',
        '    </li>',
        '    <li v-bind:class="{active: (item.id===0)} " v-for="item in items">',
        '        <a v-if="item.menuType==\'0\'" v-bind:href="\'#\'+item.id" v-bind:title="item.menuName" data-toggle="collapse">',
        '           <em v-if="item.menuIcon != null" v-bind:class="item.menuIcon"></em>',
        '           <span data-localize="sidebar.nav.menu.MENU">{{item.menuName}}</span>',
        '        </a>',
        '        <a v-if="item.menuType==\'1\'" v-bind:href="item.menuPath" v-bind:title="item.menuName">',
        '           <em v-if="item.menuIcon != null" v-bind:class="item.menuIcon"></em>',
        '           <span data-localize="sidebar.nav.SINGLEVIEW">{{item.menuName}}</span>',
        '        </a>',
        '        <ul v-if="item.menuType==\'0\'" v-bind:id="item.id" class="nav sidebar-subnav collapse">',
        '           <li class="sidebar-subnav-header">{{item.menuName}}</li>',
        '           <li class=" "  v-for="item in item.subList">',
        '               <a v-bind:href="item.menuPath" v-bind:title="item.menuName" style="margin-left: 10px;">',
        '                   <em v-if="item.menuIcon != null" v-bind:class="item.menuIcon"></em>',
        '                   <span data-localize="sidebar.nav.menu.SUBMENU">{{item.menuName}}</span>',
        '               </a>',
        '           </li>',
        '        </ul>',
        '    </li>',
        '</ul>'
    ].join('')
});

var contentView = Vue.extend({
    name:'content-view',
    props:{path:'#'},
    template:[
        '<div class="content-wrapper">',
        '   <iframe scrolling="yes" frameborder="0" style="width:100%; min-height:500px;overflow:visible;background:#fff;" v-bind:src="path"></iframe>',
        '</div>'
    ].join('')
});

var menuData = [
    {
        id:0,
        menuName:"仪表盘",
        menuPath:"#page/main.html",
        menuIcon:"fa fa-file-o",
        menuType:"menu",
        subList:{}},
    {
        id:1,
        menuName:"菜单1",
        menuPath:"#",
        menuIcon:"icon-folder",
        menuType:"group",
        subList:[{
            id:2,
            menuName:"菜单2",
            menuPath:"#page/page.html",
            menuIcon:"fa fa-file-o",
            menuType:"menu",
            subList:{}
        },{
            id:5,
            menuName:"菜单5",
            menuPath:"#",
            menuIcon:"fa fa-file-o",
            menuType:"menu",
            subList:{}
        }]
    },
    {
        id:3,
        menuName:"菜单管理",
        menuPath:"#page/management/menu.html",
        menuIcon:"fa fa-file-o",
        menuType:"menu",
        subList:{}
    },
    {
        id:4,
        menuName:"人员管理",
        menuPath:"#page/management/user.html",
        menuIcon:"fa fa-file-o",
        menuType:"menu",
        subList:{}
    }

];
Vue.config.devtools = true;
Vue.config.debug = true;
var app = new Vue({
    el:"#cx-app",
    data:{
        'menuList':{},
        'menuPath':'page/main.html'
    },
    components:{
        'nav-view':navView,
        'content-view':contentView
    },
    methods:{
        init:function () {
            var href = window.location.href;
            var v = this;
            if (href.split("#")[1]){
                v.menuPath = href.split("#")[1];
            }
            $.ajax({
                url:'/as/menuApi/list',
                type:'post',
                data:{},
                'dataType':"json",
                'headers': {
                    'X-XSRF-TOKEN':$.cookie('XSRF-TOKEN')
                },
                success:function (result) {
                    if(result){
                        console.log(result);
                        v.menuList = result;
                    }
                }
            })
        }
    },
    created:function () {
        this.init();
    }
});